<template>
  <el-dialog
    @close="cancel"
    :before-close="cancel"
    :title="title"
    :visible.sync="open"
    width="800px"
    append-to-body
  >
    <el-form ref="form" :model="form" label-width="150px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="车牌号码" prop="carNumber">
            <el-input
              maxlength="20"
              v-model="form.carNumber"
              placeholder="请输入车牌号码"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆体积(方)" prop="carVolume">
            <el-input
              maxlength="20"
              v-model="form.carVolume"
              placeholder="请输入车辆体积"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆载重(吨)" prop="carLoad">
            <el-input
              maxlength="20"
              v-model="form.carLoad"
              placeholder="请输入车辆载重"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆长度(米)" prop="carLength">
            <el-input
              maxlength="20"
              v-model="form.carLength"
              placeholder="请输入车辆长度"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆宽度(米)" prop="carWidth">
            <el-input
              maxlength="20"
              v-model="form.carWidth"
              placeholder="请输入车辆宽度"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆高度(米)" prop="carHeight">
            <el-input
              maxlength="20"
              v-model="form.carHeight"
              placeholder="请输入车辆高度"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆核定载质量(吨)" prop="loadMass">
            <el-input
              maxlength="20"
              v-model="form.loadMass"
              placeholder="请输入车辆核定载质量"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="行驶证号码" prop="licenseNumber">
            <el-input
              maxlength="20"
              v-model="form.licenseNumber"
              placeholder="请输入行驶证号码"
            />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="行驶证有效日期" prop="licenseValidTime">
            <el-date-picker
              clearable
              v-model="form.licenseValidTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择行驶证有效日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆检验有效日期" prop="carCheckValid">
            <el-date-picker
              clearable
              v-model="form.carCheckValid"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择车辆检验有效日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="车辆注册日期" prop="enrollTime">
            <el-date-picker
              clearable
              v-model="form.enrollTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择车辆注册日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="车辆报废日期" prop="scrapTime">
            <el-date-picker
              clearable
              v-model="form.scrapTime"
              type="date"
              value-format="yyyy-MM-dd"
              placeholder="请选择车辆报废日期"
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="gps定位Id" prop="gpsId">
            <el-input maxlength="20" v-model="form.gpsId" placeholder="请输入gps定位Id" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工作状态" prop="jobStatus">
            <el-select v-model="form.jobStatus" placeholder="请选择车辆工作状态">
              <el-option
                v-for="dict in dict.type.car_job_status"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value * 1"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-form-item label="车辆照片" prop="carImgUrl">
          <el-upload
            :limit="2"
            action="files.kylebing.cn"
            list-type="picture-card"
            accept=".jpeg,.png,.jpg,.bmp"
            v-loading="huanchong"
            :on-preview="handlePictureCardPreview"
            :http-request="uploadFile"
            :on-remove="handleRemove"
            :file-list="carPic"
            :on-exceed="tishi"
            :before-upload="checkFileType"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :modal="false" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="行驶证照片" prop="licenseImgUrl">
          <el-upload
            :limit="2"
            action="files.kylebing.cn"
            list-type="picture-card"
            accept=".jpeg,.png,.jpg,.bmp"
            v-loading="huanchong"
            :http-request="uploadDriver"
            :before-upload="checkFileType"
            :file-list="driverPic"
            :on-remove="handleRemoveDriver"
            :on-exceed="tishi"
            :on-preview="handlePictureCardPreview"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :modal="false" :visible.sync="dialogVisible">
            <img width="100%" :src="dialogImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="备注" prop="remark">
          <el-input
            maxlength="500"
            v-model="form.remark"
            type="textarea"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { addCar, fileBang } from "@/api/tms/car";
import { getQnToken } from "@/api/system/user";
import * as qiniu from "qiniu-js";
import { createLogger } from "vuex";
export default {
  props: {
    open: Boolean,
    title: String,
  },
  dicts: ["car_job_status", "car_job_expirestatus"],
  name: "AddCarMsg",
  data() {
    return {
      // 表单参数
      form: {},
      dialogImageUrl: "",
      // 车辆照片
      carPic: [],
      carKey: [],
      // 行驶证照片
      driverPic: [],
      driverKey: [],
      huanchong: false,
      dialogVisible: false,
      qnData: {},
      // 表单校验
      rules: {
        carNumber: [{ required: true, message: "车牌号码不能为空", trigger: "blur" }],
        carVolume: [
          { required: true, message: "车辆体积不能为空", trigger: "blur" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "车辆体积需为数字或保留至小数点后两位",
            trigger: "blur",
          },
        ],
        carLoad: [
          { required: true, message: "车辆载重不能为空", trigger: "blur" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "车辆载重需为数字或保留至小数点后两位",
            trigger: "blur",
          },
        ],
        carLength: [
          { required: true, message: "车辆长度不能为空", trigger: "blur" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "车辆长度需为数字或保留至小数点后两位",
            trigger: "blur",
          },
        ],
        carWidth: [
          { required: true, message: "车辆宽度不能为空", trigger: "blur" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "车辆宽度需为数字或保留至小数点后两位",
            trigger: "blur",
          },
        ],
        carHeight: [
          { required: true, message: "车辆高度不能为空", trigger: "blur" },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "车辆高度需为数字或保留至小数点后两位",
            trigger: "blur",
          },
        ],
        loadMass: [
          {
            required: true,
            message: "车辆核定载质量不能为空",
            trigger: "blur",
          },
          {
            pattern: /^\d+(.\d{1,2})?$/,
            message: "车辆核载需为数字或保留至小数点后两位",
            trigger: "blur",
          },
        ],
        carImgUrl: [
          {
            required: true,
            message: "车辆图片不能为空",
          },
        ],
        licenseNumber: [
          { required: true, message: "行驶证号码不能为空", trigger: "blur" },
        ],
        licenseImgUrl: [
          {
            required: true,
            message: "行驶证图片不能为空",
          },
        ],
        licenseValidTime: [
          {
            required: true,
            message: "行驶证有效日期不能为空",
            trigger: "blur",
          },
        ],
        carCheckValid: [
          {
            required: true,
            message: "车辆检验有效日期不能为空",
            trigger: "blur",
          },
        ],
        enrollTime: [
          { required: true, message: "车辆注册日期不能为空", trigger: "blur" },
        ],
        scrapTime: [{ required: true, message: "车辆报废日期不能为空", trigger: "blur" }],
        jobStatus: [
          {
            required: true,
            message: "工作状态不能为空",
            trigger: "blur",
          },
        ],
        createBy: [{ required: true, message: "创建者不能为空", trigger: "blur" }],
        createTime: [{ required: true, message: "创建时间不能为空", trigger: "blur" }],
        updateBy: [{ required: true, message: "更新者不能为空", trigger: "blur" }],
        updateTime: [{ required: true, message: "更新时间不能为空", trigger: "blur" }],
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          addCar(this.form).then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功！");
              this.$emit("close");
            }
          });
        }
      });
    },
    cancel() {
      this.$emit("close");
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        carNumber: null,
        carVolume: null,
        carLoad: null,
        carLength: null,
        carWidth: null,
        carHeight: null,
        loadMass: null,
        carImgUrl: null,
        licenseNumber: null,
        licenseImgUrl: null,
        licenseValidTime: null,
        carCheckValid: null,
        enrollTime: null,
        scrapTime: null,
        jobStatus: null,
        gpsId: null,
        deleted: null,
      };
      this.resetForm("form");
    },
    tishi() {
      this.$message.error("数量已经超过上限，无法继续上传！");
    },
    checkFileType() {},
    handleRemove() {},
    handleRemoveDriver() {},
    handlePictureCardPreview() {},
    // 上传车辆图片
    async uploadFile(uploadInfo) {
      let response = await this.getQnToken();
      if (response.code == 200) {
        this.qnData.token = response.data.token;
        let config = {
          useCdnDomain: true,
          region: qiniu.region.z0,
        };
        let putExtra = {
          fname: this.qnData.key,
          params: {},
          mimeType: null,
        };
        var observable = qiniu.upload(
          uploadInfo.file,
          response.data.qiniuKey,
          this.qnData.token,
          putExtra,
          config
        );
        observable.subscribe({
          next: (res) => {
            if (res.total.percent != 100) {
              this.huanchong = true;
            } else {
              this.huanchong = false;
            }
          },
          complete: (result) => {
            let avatar = `http://img.mofankj.com/${result.key}`;
            let data = {
              avatar,
            };
            this.carPic.push({
              name: uploadInfo.file.name,
              url: data.avatar,
            });
            this.carKey.push({
              fileName: uploadInfo.file.name,
              url: result.key,
            });
            // 上传的车辆照片
            let carList = [];
            for (let i = 0; i < this.carKey.length; i++) {
              carList.push(this.carKey[i].url);
              this.form.carImgUrl = carList + "";
              this.$set(this.form, this.form.carImgUrl, this.form.carImgUrl);
            }
            let params = {
              fileName: uploadInfo.file.name,
              key: result.key,
            };
            fileBang(params).then((res) => {});
          },
        });
      }
    },
    // 上传行驶证图片
    async uploadDriver(uploadInfo) {
      let response = await this.getQnToken();
      if (response.code == 200) {
        this.qnData.token = response.data.token;
        let config = {
          useCdnDomain: true,
          region: qiniu.region.z0,
        };
        let putExtra = {
          fname: this.qnData.key,
          params: {},
          mimeType: null,
        };
        var observable = qiniu.upload(
          uploadInfo.file,
          response.data.qiniuKey,
          this.qnData.token,
          putExtra,
          config
        );
        observable.subscribe({
          next: (res) => {
            if (res.total.percent != 100) {
              this.huanchong = true;
            } else {
              this.huanchong = false;
            }
          },
          complete: (result) => {
            let avatar = `http://img.mofankj.com/${result.key}`;
            let data = {
              avatar,
            };
            this.driverPic.push({
              name: uploadInfo.file.name,
              url: data.avatar,
            });
            this.driverKey.push({
              fileName: uploadInfo.file.name,
              url: result.key,
            });
            // 上传的行驶证照片
            let driverList = [];
            for (let i = 0; i < this.driverKey.length; i++) {
              driverList.push(this.driverKey[i].url);
              this.form.licenseImgUrl = driverList + "";
              this.$set(this.form, this.form.licenseImgUrl, this.form.licenseImgUrl);
            }
            let params = {
              fileName: uploadInfo.file.name,
              key: result.key,
            };
            fileBang(params).then((res) => {});
          },
        });
      }
    },
    /** 获取七牛云token */
    getQnToken() {
      return new Promise((resolve, reject) => {
        getQnToken().then((response) => {
          resolve(response);
        });
      });
    },
  },
};
</script>

<style></style>
